<template>
  <div class="containers">
    <div class="merchants" v-if="!isIid">
      <div class="tab-control">
        <div class="contain">
          <div
            class="items"
            v-for="(item, index) in title"
            :key="index"
            @click="itemsClick(index)"
          >
            <div class="title" :class="currentIndex == index ? 'active' : ''">
              {{ item }}
              <span class="line"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="banner">
        <img src="@/assets/join.png" alt="" />
      </div>
      <div class="content">
        <div class="advantage">
          <div class="titles">
            <div class="logo">
              <img src="@/assets/advantage.png" alt="" />
            </div>
            <div class="title-name">优势</div>
          </div>
          <div class="mains">
            俗话说“孤木难成林”，市场再大单打独斗总是很难获得成功。现在选择成为美婲新私密时代的合伙人，可以与一帮志同道合的人一起共创共赢，共享财富和市场。
          </div>
        </div>
        <div class="advantage equity">
          <div class="titles">
            <div class="logo">
              <img src="@/assets/equit.png" alt="" />
            </div>
            <div class="title-name">权益</div>
          </div>
          <div class="mains">
            <p>1. 赠价值 <span>100000</span> 元产品</p>
            <p>2. 赠课程名额 <span>2</span> 名 <span>39600</span> 元</p>
            <p>3. 私密峰会 <span>30</span> 个名额 <span>11400</span> 元</p>
            <p>4. 招募 <span>20</span> 个合伙人免费升级为分公司</p>
          </div>
        </div>
        <div class="advantage equity">
          <div class="titles">
            <div class="logo">
              <img src="@/assets/forword.png" alt="" />
            </div>
            <div class="title-name">权益</div>
          </div>
          <div class="mains">
            <p>
              1. 直推合伙人奖 <span>9000</span> 元/间推合伙人奖
              <span> 3000 </span>元
            </p>
            <p>2. 直推导师 <span>3000</span> 元</p>
          </div>
        </div>
        <div class="buy-us" @click="joinClick" v-if="currentIndex == 1">
          <span class="price">¥{{ priceList[currentIndex] }}</span> 加入我们
        </div>
        <div class="buy-us" @click="joinClick" v-else-if="currentIndex == 0">
          <span class="price">¥{{ priceList[currentIndex] }}</span> 加入我们
        </div>
        <div class="buy-us" @click="joinClick" v-else>
          <span class="price">¥{{ priceList[currentIndex] }}</span> 加入我们
        </div>
      </div>
      <van-action-sheet v-model="isShow" title="基础信息">
        <div class="contents">
          <div class="form-item">
            <div class="icons">
              <img src="@/assets/tuijian.png" alt="" />
            </div>
            <div class="form-items">
              <p>推荐码</p>
              <van-field v-model="formDate.msg" placeholder="请输入推荐码" />
            </div>
          </div>
          <div class="form-item">
            <div class="icons">
              <img src="@/assets/users.png" alt="" />
            </div>
            <div class="form-items">
              <p>姓名</p>
              <van-field v-model="formDate.name" placeholder="请输入真实姓名" />
            </div>
          </div>
          <div class="form-item">
            <div class="icons">
              <img src="@/assets/phone.png" alt="" />
            </div>
            <div class="form-items">
              <p>手机号</p>
              <van-field
                v-model="formDate.phone"
                placeholder="请输入实名手机号"
              />
            </div>
          </div>
          <div class="form-item forms">
            <div class="icons">
              <img src="@/assets/verify.png" alt="" />
            </div>
            <div class="form-items">
              <p>验证</p>
              <div class="gain-main">
                <van-field
                  v-model="formDate.code"
                  placeholder="请输入短信验证码"
                />
                <div class="gain" @click="getCode">{{ Ytxfont }}</div>
              </div>
            </div>
          </div>
          <!-- <div class="form-item">
            <div class="icons">
              <img src="@/assets/product-info.png" alt="" />
            </div>
            <div class="form-items">
              <p>货品信息</p>
              <div class="product-main">
                <div
                  class="products"
                  v-for="(item, index) in productText"
                  :key="index"
                  @click="productClick(index)"
                >
                  <div
                    class="imgs"
                    :class="productIndex == index ? 'img-active' : ''"
                  >
                    <img src="@/assets/checks.png" alt="" />
                  </div>
                  <span :class="productIndex == index ? 'text-active' : ''">{{
                    item
                  }}</span>
                </div>
              </div>
            </div>
          </div> -->
          <div class="pay-us" @click="payClick">立即支付授权</div>
        </div>
      </van-action-sheet>
    </div>
    <!-- 发圈海报 -->
    <div class="posters" v-else>
      <div class="banners"></div>
      <div class="posters-main">
        <p class="title">文章标题不超十个字文章标标题题不超…</p>
        <div class="user-logo">
          <div class="imgs">
            <img src="@/assets/矩形 2.png" alt="" />
          </div>
          <div class="names">发布人</div>
        </div>
        <div class="main">
          <div class="text">
            化妆品定义
            本条例(《化妆品卫生监督条例》,1989年)所称的化妆品,散布于人体表面任何部位(皮肤、毛发、指甲、口唇等),以达到清洁...
          </div>
          <div class="line"></div>
          <div class="rights">
            <div class="er"></div>
            <div class="desc">长按识别二维码</div>
          </div>
        </div>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="top">
            <div class="imgs" @click="backClick">
              <img src="@/assets/bt.png" alt="" />
            </div>
          </div>
          <div class="wrapper-mains">
            <div class="wrapper-left">
              <div class="imgs">
                <img src="@/assets/pay.png" alt="" />
              </div>
              <van-field
                class="tag-read"
                v-model="userInfoDates.weixin_id"
                placeholder="¥1000"
              />
            </div>
            <div
              class="wrapper-right copy_btn"
              :data-clipboard-text="userInfoDates.weixin_id"
              @click="copyClick"
            >
              复制账号
            </div>
          </div>
          <div class="wrapper-mains wrapper-mains-two">
            <div class="wrapper-left">
              <div class="imgs">
                <img src="@/assets/weixi.png" alt="" />
              </div>
              <van-field
                class="tag-read"
                v-model="userInfoDates.alipay_id"
                placeholder="¥1000"
              />
            </div>
            <div
              class="wrapper-right copy-code-button"
              id="copy_zfb"
              data-clipboard-action="copy"
              data-clipboard-text="wxPhone"
              @click="copyWxClick"
            >
              复制账号
            </div>
          </div>
          <div class="wrapper-tips">
            请复制添加支付宝或微信账号充值，并上传凭证！
          </div>
          <div class="pay-us-load" @click="goLoad">上传凭证</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getLeave } from '@/api/profile'
import { getPayInfos } from '@/api/pays/index'
import { Toast } from 'vant'
import ClipboardJS from 'clipboard'
import clipboard from 'clipboard'
import {
  getLevelUpFee,
  getUserLevelGain,
  gwtSendSMS,
  getApplyAgentLevel,
} from '@/api/pays'
export default {
  name: 'merchants',
  components: {},
  data() {
    return {
      // title: ['分公司', '加盟商', '导师'],
      title: [],
      currentIndex: 1,
      isShow: false,
      username: '',
      password: '',
      value: '',
      productText: ['存入云仓', '提取发货'],
      productIndex: 0,
      Ytxfont: '获取验证码',
      Traem: true,
      formDate: {
        code: '',
        phone: '',
        msg: '2A3293',
        name: 'Kobe',
      },
      isIid: '',
      leaveList: [],
      priceList: [],
      level_id: '',
      show: false,
      userInfoDates: {},
    }
  },
  created() {
    this.isIid = this.$route.query.id
    this.getLeaves() // 用户商等级
    this.getLevelUpFees()
    this.getUserLevelGains()
  },
  methods: {
    getCode() {
      console.log(23)
      if (this.Traem) {
        this.Traem = false
        let langtime = 60
        let than = this
        console.log(than.formDate.phone)
        gwtSendSMS({
          type: 'code',
          phone: than.formDate.phone,
          msg: '',
        }).then((res) => {
          console.log(res, '请求对象')
        })
        let a = setInterval(function () {
          if (langtime == 0) {
            than.Traem = true
            than.Ytxfont = '发送验证码'
            clearInterval(a)
          } else {
            langtime--
            // console.log(langtime)
            than.Ytxfont = `还剩${langtime}秒`
          }
        }, 1000)
      } else {
        console.log('不能点了')
      }
    },
    itemsClick(index) {
      this.currentIndex = index
      this.level_id = this.leaveList[index].id
      this.value = this.leaveList[index].fee
    },
    joinClick() {
      this.isShow = !this.isShow
    },
    onSubmit(values) {
      console.log('submit', values)
    },
    productClick(index) {
      this.productIndex = index
    },
    // 获取代理商等级信息
    getLeaves() {
      getLeave().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.leaveList = res.data
          console.log(this.leaveList)
          this.title = []
          this.priceList = []

          this.leaveList.forEach((item) => {
            this.title.push(item.name)
            this.priceList.push(item.fee)
          })
        }
      })
    },
    // 支付授权
    payClick() {
      // const datas = {
      //   level_id: this.leaveList[1].id || this.level_id,
      //   spread_code: this.formDate.msg, // 邀请码
      //   name: this.formDate.name,
      //   phone: '214323',
      //   sms_type: 'code',
      //   sms_code: '1341243', //短信验证码
      //   upload_ids: '', // 凭证图片
      // }

      this.show = true
      const datass = {
        price: this.leaveList[1].fee || this.value,
      }
      console.log(datass)
      console.log(getPayInfos)
      getPayInfos(datass).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.userInfoDates = res.data
          this.value = ''
        }
      })
      // return
      // this.$router.push({
      //   path: '/evidence',
      //   query: {
      //     datas,
      //   },
      // })
      // getApplyAgentLevel(datas).then((res) => {
      //   console.log(res)
      // })
    },
    // 获取门槛费
    getLevelUpFees() {
      getLevelUpFee().then((res) => {
        console.log(res)
      })
    },
    getUserLevelGains() {
      getUserLevelGain().then((res) => {
        console.log(res)
      })
    },
    backClick() {
      this.show = false
    },
    goLoad() {
      // if (this.isLoads) {
        const datas = {
          level_id: this.leaveList[1].id || this.level_id,
          spread_code: this.formDate.msg, // 邀请码
          name: this.formDate.name,
          phone: this.formDate.phone,
          sms_type: 'code',
          sms_code: this.formDate.code, //短信验证码
          upload_ids: '', // 凭证图片
        }
        console.log(datas)
        this.$router.push({
          path: '/evidence',
          query: {
            datas: datas,
          },
        })
      // } else {
      //   Toast('请先复制号码')
      // }
    },
    copyWxClick() {
      Toast('复制成功')
      console.log(23)
      this.isLoads = true
      var clipboard = new ClipboardJS('.copy-code-button') // 这里可以理解为选择器，选择上面的复制按钮
      clipboard.on('success', (e) => {
        Toast('复制成功2')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        Toast('手机权限不支持复制功能')
        // 释放内存
        clipboard.destroy()
      })
    },
    copyClick() {
      Toast('复制成功')
      this.isLoads = true
      var clipboard = new ClipboardJS('.copy_btn')
      clipboard.on('success', (e) => {
        let instance = Toast({
          message: '复制成功',
          className: 'toasts',
        })
        setTimeout(() => {
          instance.close()
        }, 2000)

        // 释放内存
        clipboard.destroy()
      })

      clipboard.on('error', (e) => {
        // 不支持复制
        let instance = Toast('该浏览器不支持自动复制')
        setTimeout(() => {
          instance.close()
        }, 2000)

        // 释放内存
        clipboard.destroy()
      })
      // console.log('123');
    },
  },
}
</script>

<style lang="scss" scoped>
.merchants {
  font-size: 14px;
  height: 100%;
  //height: 100vh;
  overflow: auto;
  background: #290b80;
  .banner {
    width: 100%;
    height: 206px;
    img {
      width: 100%;
    }
  }
}
.posters {
  height: 100vh;
  overflow: auto;
  padding: 24px 12px;
  background: #f7f6fb;
  font-size: 14px;
  .banners {
    width: 351px;
    height: 459px;
    background-color: skyblue;
    border-radius: 8px;
  }
  .posters-main {
    height: 214px;
    margin-top: -20px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    //: blur(0px);
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 18px;
      font-weight: bold;
      color: #1f0d44;
    }
    .user-logo {
      height: 30px;
      margin: 9px 0 11px;
      display: flex;
      align-items: center;
      .imgs {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        //background-color: #f00;
        overflow: hidden;
        margin-right: 12px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .names {
        font-weight: 400;
        color: #afabb7;
      }
    }
    .main {
      display: flex;
      justify-content: space-between;
      .text {
        width: 195px;
      }
      .line {
        width: 1px;
        height: 50px;
        margin: auto 0;
        background-color: #d9d9d9;
      }
      .rights {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .er {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          background-color: pink;
        }
        .desc {
          margin-top: 13px;
          font-size: 10px;
          font-weight: 400;
          color: #afabb7;
          text-align: center;
        }
      }
    }
  }
}
.content {
  padding: 0 12px;
  margin-top: 5px;
  .advantage {
    padding: 20px 12px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    .titles {
      display: flex;
      .logo {
        width: 24px;
        height: 24px;
        margin-right: 2px;
        img {
          width: 100%;
        }
      }
      .title-name {
        font-weight: 600;
        color: #622ccc;
        font-size: 20px;
      }
    }
  }
  .equity {
    color: #1f0d44;
    span {
      font-size: 16px;
      font-weight: 600;
      color: #ff6400;
    }
  }
}
.tab-control {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #fff;
  .contain {
    display: flex;
    justify-content: space-between;
    color: #665e75;
    margin: 0 75px;
  }
}

.buy-us {
  //position: absolute;
  //left: 12px;
  //bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 351px;
  height: 40px;
  font-size: 16px;
  background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
  border-radius: 25px;
  margin: 20px 0;
  .price {
    font-size: 20px;
    margin-right: 4px;
  }
}
.active {
  font-size: 16px;
  font-weight: 800;
  color: #1f0d44;
  .line {
    display: block;
    margin: -8px auto 0;
    width: 16px;
    height: 3px;
    background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
    border-radius: 2px;
  }
}
.contents {
  .form-item {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ececef;
    margin-bottom: 16px;
    .form-items {
      width: 100%;
    }
    .icons {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }
}
.gain-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .van-cell {
    flex: 1;
  }
}
.gain {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 102px;
  //flex: 102px;
  height: 30px;
  background: #ffffff;
  border-radius: 23px;
  opacity: 0.5;
  border: 1px solid #d9d9de;
  color: #622ccc;
}
.pay-us {
  width: 315px;
  height: 40px;
  background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  //margin: 10px 0;
  margin: 150px 0 0;
}
.product-main {
  display: flex;
  margin: 16px 0;
  .products {
    display: flex;
    align-items: center;
    margin-right: 34px;
  }
  .imgs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #d9d9de;
    img {
      //  padding: 4px;
      width: 80%;
    }
  }
}
.product-main .img-active {
  background-color: #622ccc;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .wrapper-mains {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-bottom: 10px;
  }
  .wrapper-mains-two {
    margin-top: 10px;
  }
  img {
    width: 24px;
    height: 24px;
  }
  .wrapper-left {
    width: 172px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #333;
    border-bottom: 1px solid #f7f6fb;
    img {
      display: block;
      width: 24px;
      height: 24px;
    }
  }
  .wrapper-right {
    width: 76px;
    height: 32px;
    margin-top: 35px;
    border-radius: 16px;
    opacity: 0.5;
    border: 1px solid #1677ff;
    color: #1677ff;
    text-align: center;
    line-height: 32px;
  }
}

.block {
  width: 300px;
  height: 344px;
  background: #ffffff;
  border-radius: 8px;
  padding: 0 20px;
  overflow: hidden;
  font-size: 14px;
  .top {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    .imgs {
      width: 24px;
      height: 24px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .wrapper-tips {
    color: #e02020;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 10px;
  }
}
.pay-us-load {
  //width: 351px;
  width: 100%;
  height: 32px;
  background: #1677ff;
  box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
  border-radius: 16px;
  text-align: center;
  line-height: 32px;
  color: #fff;
  margin-top: 30px;
}
.text-active {
  color: #622ccc;
}
::v-deep .van-popup {
  height: 520px;
  padding: 0 30px;
}
::v-deep .van-action-sheet__header {
  text-align: left;
}
::v-deep .van-cell {
  padding: 0;
}
::v-deep .van-cell__value {
  display: flex;
  width: 100%;
  align-items: center;
}
::v-deep {
  .forms .van-cell::after {
    border-bottom: none;
  }
  .forms .van-field__control {
    border-bottom: none;
  }
}
::v-deep {
  .van-overlay {
    z-index: 9990;
  }
}
.toasts {
  z-index: 99999 !important;
}
</style>